<template>
    <div class="about-box">
        <div class="user-header">
            <div class="user-img">
                <img src="../assets/静态资源图片/user.jpg" alt="">
            </div>
            <div class="user-right">
                <p class="user-name">用户名称</p>
                <p class="user-address"><span>我的收货地址</span><span class="icon iconfont icon-right"></span></p>
            </div>
        </div>
        <div class="user-shopping">
            <div class="shopping-box" v-for="(item, index) in st" :key="index"> 
                <div class="logo" >
                    <img :src="'../assets/静态资源图片/'+ item.logo +'.png'" alt="">
                    <span>{{item.text}}</span>
                </div>
                <div class="cl"> 
                    {{ item.xx }}
                    <span class="icon iconfont icon-right"></span>
                </div>
            </div>
        </div>
        <div class="lognOut">
            <input type="button" value="退出登录">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            st:[
                { logo:"order",text:"我的订单",xx:""},
                { logo:"shoppingCart",text:"我的购物车",xx:"" },
                { logo:"pieceTogether",text:"我的拼团",xx:"" },
                { logo:"wallet",text:"我的钱包",xx:"快速提现" },
                { logo:"discountCoupon",text:"我的优惠券",xx:"" },
                { logo:"collect",text:"我收藏的商品",xx:"" },
                { logo:"shop",text:"我收藏的店铺",xx:"" },
                { logo:"message",text:"消息通知",xx:"" },
                { logo:"service",text:"客服",xx:"" },
                { logo:"feedback",text:"意见反馈",xx:"" }
            ]
        }
    },
    beforeRouteEnter (to, from, next) {
        // console.log("about-路由进入");
        // console.log(to,from)

        let token = localStorage.getItem("token");
        if(token){
            next();
        }else{
            window.$showTip("请先登录")
            setTimeout(()=>{
                next({
                    name:"login",
                    params:{
                        url:to.fullPath
                    }
                });
            },1000);
        }
        // next();
    },
    beforeRouteLeave (to, from, next) {
        // console.log("about-路由离开")
        next();
    }
}
</script>
<style lang="less" scoped>
.about-box{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: @h;
    overflow: hidden;
    background-color: @ef;
}

.user-header{
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    // border:1px solid red;
    background-color: white;
    display: flex;
    .user-img{
        width: 25%;
        img{
            width:50%;
            border-radius: 50%;
            position: relative;
            top: 26px;
            left: 40px;
        }
    }
    .user-right{
        width: 75%;
        position: relative;
        top: 25px;
        color: @black;
        .user-name{
            font-size: 36px;
        }
        .user-address{
            margin-top: 10px;
            font-size: 26px;
            color: @66;
            :nth-child(1){
                margin-right:50px; 
            }
        }
    }
}


// 模板
.shopping-box{
    box-sizing: border-box;
    padding-left:20px;
    padding-right: 20px;
    height:80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid @de;
    background-color:white;
    .logo{
        img{
            padding: 0;
            width: 50px;
            height: 50px;
            border:none;
        }
        > span{
            font-size: 30px;
            margin-left: 20px;
        }
    }
    .cl{
        height: 100%;
        line-height:80px;
        display: flex;
        align-items: center;
        font-size: 20px;
        color: @99;
        border: none;
        position: relative;
        > span{
            position: relative;
        }
    }
}
.user-shopping{
    box-sizing: border-box; 
    width: 100%;
    background-color: @ef;
    :nth-child(1){
        margin-top:20px; 
        margin-bottom:20px; 
        .shopping-box;
    }
    :nth-child(7){
        margin-bottom:20px; 
    }
    
}


.lognOut{
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    margin: 30px 0 0 0;
    padding:0 30px;
    input[type=button]{
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        border-radius: 10px;
        color: white;
        background-color: @pink; 
    }
}
</style>